ReactのMain Concept：9. Forms

Reactにおいて、HTMLのform要素は他のDOM要素とはちょっとちがう扱いになる

formは自然に内部状態を保存しているため

code:form.html

<form>

<label>

Name:

<input type="text" name="name" />

</label>

<input type="submit" value="Submit" />

</form>

上のコードは普通のHTML formだとユーザがsubmitを押したときに新しいページに遷移する。Reactでもそうなる

でも殆どのケースでは、formを送信したことをハンドルするJSのfunctionがあり、ユーザがフォームに入力したデータにアクセスできる方が合理的

こうするために、ふつう"controlled components"と呼ばれる技術が使われる

Controlled Components

The textarea Tag

The select Tag

The file input Tag

Handling Multiple Inputs

Controlled Input Null Value

Alternatives to Controlled Components

Fully-Fledged Solutions